<template>
    <div>
      <el-card>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>积分规则</el-breadcrumb-item>
        </el-breadcrumb>
          <h3 style="text-align: left;font-size: 25px;margin-bottom: 0px">积分规则</h3>

      </el-card>


      <el-card style="margin-top: 20px">
        <h4 style="text-align: left;font-weight: normal;margin-top: 0px">基础规则</h4>
        <el-form ref="form" :model="form" label-width="150px" style="width: 500px;margin: 0 auto" size="small">


          <el-form-item label="最小抵扣单位" style="font-size: 14px;text-align: left">
            <el-input v-model="form.minimumunit" style="width: 150px">
              <template slot="append" >分</template>
            </el-input>
          </el-form-item>

          <el-form-item label="1积分=" style="font-size: 14px;text-align: left">
            <el-input v-model="form.exange" style="width: 150px">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>

          <el-form-item label="积分有效期" style="font-size: 14px;text-align: left;color: grey">

            自获得之日起
            <el-input v-model="form.expiredate" style="width: 70px;height: 32px">

            </el-input>
            天有效果
          </el-form-item>




          <el-form-item label="积分获取上限" style="font-size: 14px;text-align: left">
            <el-input v-model="form.gainupperlimit" style="width: 150px;height: 32px">
              <template slot="append">分</template>
            </el-input>
          </el-form-item>

        </el-form>
      </el-card>

      <el-card style="margin-top: 20px">
        <h4 style="text-align: left;font-weight: normal;margin-top: 0px">抵扣规则</h4>
        <el-form ref="form" :model="form" label-width="150px" style="width: 500px;margin: 0 auto" size="small">

          <el-form-item label="抵扣商品" style="text-align: left">
            <el-radio-group v-model="form.deduct" style="text-align: left">
              <el-radio :label="true">全部商品</el-radio>
              <el-radio :label="false">部分商品</el-radio>
            </el-radio-group>
            <span style="margin-left: 10px;color: #409EFF;cursor: pointer" v-if="form.deduct == false" @click="showEditDialog">
              请选择商品
            </span>
          </el-form-item>


          <el-form-item label="积分抵扣上限" style="text-align: left">
            <el-input v-model="form.deductupperlimit" style="width: 150px">
              <template slot="append">分</template>
            </el-input>
          </el-form-item>


          <el-form-item style="text-align: left">
            <el-button type="primary" @click="update">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>



      <el-dialog
          title="选择商品"
          :visible.sync="editDialogVisible"
          width="50%"
          @close="editFormClose"
      >

        <el-card>

          <el-row :gutter="20">
            <el-col :span="10">
              <el-input placeholder="请输入商品名称" clearable v-model="commodityname" @clear="searchCommodity">
                <el-button slot="append" icon="el-icon-search" @click="searchCommodity"></el-button>
              </el-input>
            </el-col>

            <el-col :span="2">
              <el-button type="primary" @click="clearAllsearch">重置</el-button>
            </el-col>

          </el-row>

        </el-card>

        <el-card style="margin-top: 10px">

          <el-table
              :data="commodityList"
              @selection-change="selectionChange"
              stripe>
            <el-table-column
                type="selection"
                width="55"
                prop="id">
            </el-table-column>

            <el-table-column label="商品封面">
              <template slot-scope="scope">
                <img :src="iurl+scope.row.commoditycover" style="height: 50px; width:50px;">
              </template>

            </el-table-column>

            <el-table-column label="商品名称" prop="commodityname"></el-table-column>
            <el-table-column label="商品价格" prop="commodityprice"></el-table-column>
            <el-table-column label="销售量" prop="salecounts"></el-table-column>
            <el-table-column label="商品状态" prop="commoditystatus">
              <template slot-scope="s">
                <!--            <span v-text="s.row.commoditystatus==1?'已上架':'未上架'"></span>-->
                <b style="color:#3cb371" v-show="s.row.commoditystatus==1">{{caseStatusArr[1]}}</b>
                <b style="color:#ff0000" v-show="s.row.commoditystatus==0">{{caseStatusArr[0]}}</b>
              </template>
            </el-table-column>
            <el-table-column label="上架时间" prop="salestarttime"></el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[4, 10 , 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
          ></el-pagination>
        </el-card>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateBatch">确 定</el-button>
          <el-button @click="editFormClose">取 消</el-button>
        </span>
      </el-dialog>


    </div>
</template>
<script>
    import axios from "axios";

    export default {
        data() {
            return {
              form: {
                minimumunit: '',
                exange: '',
                expiredate: '',
                gainupperlimit: '',
                deduct: '',
                deductupperlimit: ''
              },
              editDialogVisible: false,
              commodityname: "",
              commodityList: [],
              iurl: this.$MyUrl.imgUrl,//图片地址
              caseStatusArr:{
                1:"已上架",
                0:"未上架",
              },
              ids:[]

            };
        },
        methods: {

          initRule(){
            let url = "integralrule/query"
            this.$axios.get(url)
                .then(res=>{
                  if (res.data.code == 101){
                    console.log(res.data.data)
                    this.form = res.data.data
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          update(){
            let url = "integralrule/update"
            this.$axios.put(url,this.form)
                .then(res=>{
                  if (res.data.code == 101){
                    this.$message({
                      type:"success",
                      message:res.data.msg,
                      duration:1000
                    })
                    this.initRule();
                  }else{
                    this.$message({
                      type:"error",
                      message:res.data.msg,
                      duration:1000
                    })
                  }
                })
          },

          editFormClose(){
            this.editDialogVisible =false;
          },
          searchCommodity() {
            this.pageNum = 1;
            this.getCommodityList();
          },
          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.getCommodityList();
          },
          handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.getCommodityList();
          },
          getCommodityList() {
            let url = "commodity/clist";
            this.$axios.get(url, {
              params: {
                name: this.commodityname,
                now: this.pageNum,
                size: this.pageSize
              }
            }).then(res => {
              if (res.data.code == 200) {
                this.commodityList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg,
                  duration: 1000
                })
              }
            });

          },
          clearAllsearch(){
            this.commodityname='';

          },
          //打开编辑窗口
          showEditDialog() {
            this.editDialogVisible = true;

          },
          selectionChange(obj){
            this.ids = [];
            for(let o of obj){
              this.ids.push(o.id);
            }
          },
          updateBatch() {
            if (this.ids.length < 1) {
              this.$message({
                type: "error",
                message: "请至少选择一个数据",
                duration: 1000
              })
            } else {

              let params = {ids: this.ids}
              let url = "integralrule/updateBatch";
              axios({
                url: url,
                method: "put",
                params: params,
                paramsSerializer: params => {
                  return this.$qs.stringify(params, {indices: false})
                }
              }).then(res => {
                if (res.data.code == 101) {
                  this.$message({
                    type: "success",
                    message: res.data.msg,
                    duration: 1000
                  });
                  this.editDialogVisible=false;

                } else {
                  this.$message({
                    type: "error",
                    message: res.data.msg,
                    duration: 1000
                  });
                }
              })


            }

          }
        },
        created() {
          this.initRule();
          this.searchCommodity();
        }
    };
</script>
<style lang="less" scoped>

#app .el-input__inner{
  height: 32px;
  line-height: 32px;
}




</style>